<template>
  <div :class="isCollapse?'hideLeftMenu':'leftMenu'">
    <div :class="isCollapse?'hideLeft_userImg':'left_userImg'">
      <div class="userImg">
         <img src="../../assets/user.jpg" alt="">
      </div>
      <div :class="isCollapse?'hideText':'text'">老李头</div>
    </div>
    <div :class="isCollapse?'hideLeft_title':'left_title'">导航菜单</div>
    <el-row class="tac">
      <el-col>
        <!--
          unique-opened	是否只保持一个子菜单的展开	boolean	—	false
          collapse	是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）	boolean	—	false
          collapse-transition	是否开启折叠动画	boolean	—	true
          router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转	boolean	—	false
          default-active	当前激活菜单的 index	string	—	—
          active-text-color	当前激活菜单的文字颜色（仅支持 hex 格式）	string	—	#409EFF
          default-active	当前激活菜单的 index	string	—	—
         -->
    <el-menu
     background-color="#1e272c"
      text-color="#9ba8ae"
      active-text-color="#3495fc"
      :unique-opened="true"
       :collapse="isCollapse"
       :collapse-transition="false"
       :router="true"
       :default-active="activesIndex">
      <el-submenu :index="menu.id + ''"  v-for="menu in menuLevels" :key="menu.id">
        <!-- 一级菜单 -->
        <template slot="title">
          <i :class="iconObj[menu.id]"></i>
          <span>{{menu.authName}}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item-group v-for="twoMenu in menu.children" :key="twoMenu.id">
          <el-menu-item :index="twoMenu.path" @click="onSelectColor(twoMenu.path)" class="elMenuIten">
            <i class="iconfont icon-shangpin1"></i>
            <span>{{twoMenu.authName}}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
</el-row>
<!--  -->
  </div>
</template>

<script>
import { getMenus } from "@/api/user";
import eventBus from "@/eventBus/eventBus"
export default {
  data() {
    return {
      menuLevels:[],//循环菜单数据
      isCollapse:false,// 控制左侧菜单显示隐藏
      // 左侧菜单图标
      iconObj:{
         "125":"iconfont icon-yonghu",
         "103":"iconfont icon-quanxianguanli",
         "101":"iconfont icon-shangpin",
         "102":"iconfont icon-dingdan",
         "145":"iconfont icon-shuju"
      },
      activesIndex:''//激活菜单选项
    }
  },
  created(){
    this.leftMenus();
    // 用于接收兄弟组件header传过来的值
     eventBus.$on('isShowCollapse',(message)=>{
        //一些操作，message就是从header组件传过来的值
        console.log(message)
        this.isCollapse = message
    });
    //菜单默认激活时
    this.activesIndex= window.sessionStorage.getItem('activeItem')
  },
  methods:{
 async leftMenus(){
   let {data} = await getMenus();
   console.log(data, '左侧菜单')
   this.menuLevels = data.data
},
onSelectColor(res){
  window.sessionStorage.setItem('activeItem',res)
}
  }
}
</script>

<style lang="less" scoped>
.hideLeftMenu{
  width: 64px;
  height: 100%;
   background: #222d31;
    color: #fff;
    .userImg{
      margin: 0 auto;
    }
   .hideLeft_title{
     display: none;
   }
   .el-menu{
     width: 56px;
     border-right: none;
      background: #2c3b42;

   }
   .hideText{
     padding: 10px 0;
     font-size: 12px;
     text-align: center;
   }
}
 .leftMenu{
   height: 100%;
   background: #222d31;
   .hideLeft_userImg{
     display: none;
   }
   .left_userImg{
     height: 45px;
     padding: 20px;
      color: #fff;
     background: hsl(196, 18%, 16%);
     display: flex;
     align-items: center;
   }
   .left_title{
     padding: 10px 20px;
     background: #1a2225;
     color: #556876;
   }
.el-submenu__title i{
  padding-right: 6px;
}
 /deep/.el-menu{
    background: #2c3b42;
    border-right: none;
  }
  .el-menu-item i{
    padding-right: 6px;

  }
  .el-menu-item:focus, .el-menu-item:hover{
    color: #f9ffff;
    background: none;
  }
  /deep/.el-menu-item-group{
    .elMenuIten{
      background: #2c3b42 !important;
    }
    .elMenuIten:hover{
      background: #1a2225 !important;
      color: #ffffff !important;
      .icon-shangpin1:before{
        color: #ffffff;
      }
    }
    .el-menu-item-group__title{
    padding: 0;
  }
  }
 }
</style>
